<template>
  <vue3VideoPlay
    v-bind="op"
    :poster="cover"
    @timeupdate="ontimeupdateHandler"
    @play="onPlayHandler"
    @pause="onPauseHandler"
    @ended="onEnded"
  />
</template>
<script setup>
import { computed, reactive } from 'vue'
import 'vue3-video-play/dist/style.css'

let emits = defineEmits(['onTimeUpdate', 'onplay', 'onpause','onend'])
let props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  title: {
    type: String,
    default: ''
  },
  src: {
    type: String,
    required: true
  },
  muted: {
    type: Boolean,
    default: false
  },
  cover: {
    type: String,
    default: ''
  }
})


const options = reactive({
  width: props.width, //播放器宽度
  height: props.height, //播放器高度
  color: '#409eff', //主题色
  title: props.title, //视频名称
  src: 'http://127.0.0.1:8080/profile/upload/video/6f51c938afe8489fd9d2fcd353a63580.mp4', //视频源
  muted: props.muted, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    'audioTrack',
    'quality',
    'speedRate',
    'volume',
    'setting',
    'pip',
    'pageFullScreen',
    'fullScreen'
  ] //显示所有按钮,
})

const op = computed(() => {
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  options.src = props.src
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  options.title = props.title
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  options.width = props.width
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  options.height = props.height
  console.log(options)
  return options
})

function ontimeupdateHandler(e) {
  emits('onTimeUpdate', e)
}

function onPlayHandler(e) {
  emits('onplay', e)
}

function onPauseHandler(e) {
  emits('onpause', e)
}
function onEnded(e) {
  emits('onend', e)

}
</script>

<style scoped lang="scss">

</style>